<!DOCTYPE html>
<html
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:th="http://www.thymeleaf.org"
    xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<body>
  <!-- MOBILE NAVIGATION -->
  <div layout:fragment="mobile-nav">
    <div class="mobile-navigation--wrapper mobile-only">
      <div class="navigation-drawer--container">
        <div class="mobile-search--container">
          <form class="form-inline form-search" th:action="@{/search}" action="/search" method="get">
            <button type="submit" class="search-form--submit"><i class="icon-search"></i></button>
            <input type="text" class="search-query search-form--form js-search-input" placeholder="Search..." name="q" th:value="${searchForm != null ? searchForm.q : ''}" />
          </form>
        </div>
        <div class="navigation-item-list">
          <div th:class="${@uih.navClass(navSection?:'','')}">
            <a th:href="@{/}" href="/">
              Home
              <i class="icon-chevron-right pull-right"></i>
            </a>
          </div>
          <div th:class="${@uih.navClass(navSection?:'','docs')}">
            <a th:href="@{/docs}" href="docs/index.html">
              Docs
              <i class="icon-chevron-right pull-right"></i>
            </a>
          </div>
          <div th:class="${@uih.navClass(navSection?:'','guides')}">
            <a th:href="@{/guides}" href="guides/index.html">
              Guides
              <i class="icon-chevron-right pull-right"></i>
            </a>
          </div>
          <div th:class="${@uih.navClass(navSection?:'','projects')}">
            <a th:href="@{/projects}" href="projects/index.html">
              Projects
              <i class="icon-chevron-right pull-right"></i>
            </a>
          </div>
          <div th:class="${@uih.navClass(navSection?:'','blog')}">
            <a th:href="@{/blog}" href="blog/index.html">
              Blog
              <i class="icon-chevron-right pull-right"></i>
            </a>
          </div>
          <div th:class="${@uih.navClass(navSection?:'','questions')}">
            <a th:href="@{/questions}" href="/questions">
              Questions
              <i class="icon-chevron-right pull-right"></i>
            </a>
          </div>
        </div>
      </div>
      <div class="mobile-nav">
        <div class="nav-icon js-open-nav-drawer">
          <i class="icon-reorder"></i>
        </div>
        <div class="header-center-icon">
          <a th:href="@{/}" href="/">
            <div class="icon icon-spring-logo-mobile"></div>
          </a>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
